<template>
	<view class="page">
		<!-- 轮播图 -->
		<swiper  indicator-dots autoplay class="swiperbox" circular >
			<swiper-item v-for="(item ,index) in swiperInfoList" :key="index">
				<image :src="item.image" class="img"></image>
			</swiper-item>
		</swiper>
		
		
		<!-- 热门超英的左右滑动组件 -->
		<view class=" padding-xs">
			<!-- 标题 -->
			<view class="flex justify-start align-center">
				<text class="cuIcon-hotfill padding-xs text-red" style="font-size: 35rpx;"></text>
				<text class="text-black text-xxl margin-left-xs" style="font-weight: bold;">热门超英</text>
			</view>
			<!-- 横向滑动的东西 -->
			<view class="nav margin-top-xs">
				<scroll-view class="scroll-box" scroll-x="true" >
					<view class="scroll-box">
						<view  class="scroll-item" v-for="(item ,index) in scrollList" :key="index">
							<image src="../../static/poster/civilwar.jpg"  class="scroll_img"></image>
							<view class="scroll-text text-cut">{{item.title}}</view>
							<star :innerScore="item.score"></star>
						</view>
					</view>
				</scroll-view>
			</view>
		</view>
		
		
		<!-- 猜你喜欢列表信息展示 -->
		<view class="padding-xs">
			<!-- 标题 -->
			<view class="flex justify-start align-center margin-top-xs">
				<text class="cuIcon-like padding-xs text-green" style="font-size: 35rpx;"></text>
				<text class="text-black text-xxl margin-left-xs" style="font-weight: bold;">猜你喜欢</text>
			</view>
			<!-- 列表展示 -->
			<view class="list-container">
				<view class="list-box" v-for="(item,index) in movieList" :key="index">
					<view class="list-item-1">
						<image src="../../static/poster/civilwar.jpg" mode=""></image>
					</view>
					<view class="list-item-2">
						<text class="list-title">{{item.title}}</text>
						<star :innerScore="item.score" class="margin-top-xs"></star>
						<view class="list-tag">
							{{item.listtag}}
						</view>
						<view class="list-time">
							上映时间：{{item.listtime}}（中国大陆/美国）
						</view>
					</view>
					<view class="list-item-3">
						<text class="cuIcon-evaluate list-item-3-icon " :class="active==index ?'text-yellow':''"></text>
						<view class="text-yellow text-bold padding-xs" @click="like(index)">
							赞一下
						</view>
					</view>
				</view>
				
			</view>
			
		</view>
	</view>
	
</template>

<script>
	import star from '../../components/mycomponent/star.vue'
	export default {
		data() {
			return {
				swiperInfoList:[],
				scrollList:[],
				movieList:[],
				active:Number
			}
		},
		components:{
			star:star
		},
		onLoad() {
			this.getSwiperlist()
			this.getScrollList()
			this.getmovieList()
		},
		methods: {
			getSwiperlist(){
				//通过原型链,取得url的根地址
				var serverUrl=this.serverUrl
				uni.request({
					//通过模板字符串拼接url地址
				    url: `${serverUrl}/api/getswiper2`,
				    method: 'GET',
				    success: res => {
						this.swiperInfoList=res.data.data.list
						console.log(this.swiperInfoList)
					}
				});
			},
			getScrollList(){
				//通过原型链,取得url的根地址
				var serverUrl=this.serverUrl
				uni.request({
					//通过模板字符串拼接url地址
				    url: `${serverUrl}/api/scroll`,
				    method: 'GET',
				    success: res => {
						this.scrollList=res.data.data.list
						console.log(this.scrollList)
					}
				});
			},
			//点赞的处理
			like(index){
				var that =this
				that.active=index,
				setTimeout(()=>{
					that.active=NaN
				},1000)
			},
			getmovieList(){
				//通过原型链,取得url的根地址
				var serverUrl=this.serverUrl
				uni.request({
					//通过模板字符串拼接url地址
				    url: `${serverUrl}/api/list`,
				    method: 'GET',
				    success: res => {
						this.movieList=res.data.data.list
						console.log(this.movieList)
					}
				});
			},
		}
	}
</script>

<style scoped lang="stylus">
.page
	background-color #F8F8F8
	.swiperbox
		width: 100%;
		height: 440rpx;
		.img
			width 100%
			height 440rpx
	.nav
		width 100%
		height 350rpx
		.scroll-box
			display flex
			.scroll-item
				width 200rpx
				height 100%
				margin 0 10rpx
				background-color #ffffff
				border-radius 20rpx
				overflow hidden
				flex-shrink 0
				box-shadow 0px 3px 4px 0px gray
				margin-bottom 8rpx
				.scroll_img
					width 100%
					height 270rpx
					border-radius 20rpx
				.scroll-text
					padding-left 10rpx
					font-weight bold
					font-size 35rpx
					line-height 40rpx
	.list-box
		display flex
		justify-content space-between
		margin-bottom 20rpx
		align-items center
		.list-item-1
			flex-grow 1 
			image
				width 200rpx
				height 270rpx
				border-radius 10rpx
				margin 10rpx
		.list-item-2
			flex-grow 2 
			margin 10rpx
			border-right 2px dashed #dbdbda
			align-self stretch
			display flex
			flex-direction column
			justify-content space-between
			padding 0rpx 20rpx 20rpx 0
			.list-title
				font-size 40rpx
				font-weight bold
			.list-tag,.list-time
				font-size 30rpx
				color grey
				font-family 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif
				// margin  10rpx 0rpx
		.list-item-3
			flex-grow 1 
			flex-shrink 0
			text-align center
			padding-right 10rpx
			.list-item-3-icon
				font-size 40rpx
</style>
